<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <a href="add.html">通过Excel导入数据</a>
        <form>
            <p>输入名字签到：
                <input type="text" id="studentName"/>
                <button type="button" id="btn">签到</button>
            </p>
        </form>


        <!--左边部分 -->
        <div class="col-md-6">
            <table class="table" cellspacing="0px" cellpadding="0px" style="text-align: center">
                <thead><tr><th>已签到学生</th></tr></thead>
                <tbody id="signStudent"><tr><td>0</td></tr></tbody>
            </table>
        </div>


        <!--右边部分 -->
        <div class="col-md-6">
            <table class="table" cellspacing="0px" cellpadding="0px" style="text-align: center">
                <thead><tr><th>未签到学生</th></tr></thead>
                <tbody id="noSignStudent"><tr><td>0</td></tr></tbody>
            </table>
        </div>

    </div>
</div>

</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
    $(function () {

        load()

        function load() {
            $("#signStudent").empty()
            $("#noSignStudent").empty()
            var tr1 = "";
            var tr2 = "";
            $.get("/studentList",function (data) {
                if(data.signStudent.length>0){
                    $.each(data.signStudent,function (index,item) {
                        tr1 += "<tr class='text-center' data-id='" + item.studentId + "' >";

                        tr1 += '<td class="text-center">' + item.studentName + '</td>';

                        if(item.status == 1) {
                            tr1 += '<td class="text-center">' + item.sigTime + '</td>';
                        }

                        tr1 += "</tr>";

                    })
                    $("#signStudent").append(tr1);
                }else{
                    $("#signStudent").append("<tr><td>还没有学生签到</td></tr>")
                }

                if(data.noSignStudent.length>0){
                    $.each(data.noSignStudent,function (index,item) {
                        tr2 += "<tr class='text-center' data-id='" + item.studentId + "' >";

                        tr2 += '<td class="text-center">' + item.studentName + '</td>';

                        tr2 += "</tr>";
                    })
                    $("#noSignStudent").append(tr2);
                }else{
                    $("#noSignStudent").append("<tr><td>全部学生已经签到</td></tr>")
                }
            })
        }

        $("#btn").click(function () {
            var studentName = $("#studentName").val()
            $.ajax({
                type:"Post",
                url:"/sign",
                data:{studentName:studentName},
                success:function (data) {
                    if(data.code==200){
                        load()
                    }
                    $("#studentName").val("")
                }
            })
        })

    })
</script>
</html>